<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script>
    // 第一个参数是元素的名字，第二个参数是属性对象，如果不设置需要传递一个null,第三个参数是包裹的内容
    // 真实DOM: <div>包裹的内容</div>
    // 虚拟DOM:
    // {
    //     "type": "div",// 标签名
    //     "key": null,
    //     "ref": null,
    //     "props": {
    //     "children": "包裹的内容"
    // },
    //     "_owner": null,
    //     "_store": {}
    // }
    // const div = React.createElement("div",null,"包裹的内容");
    // console.log(div);
    // ReactDOM.createRoot(document.querySelector("#root")).render(div);


    // 真实DOM: <div><p style="color: red;">1</p><p>2</p></div>
    // 虚拟DOM:
    // {type:"div",props:{children:[{type:"p",props:{children:"1",style:{color:"red"}}},{type:"p",props:{children:"2"}}]}}
    const p1 = React.createElement("p", {
        style: {
            color: "red"
        }
    }, "1");// {type:"p",props:{children:"1",style:{color:"red"}}}
    const p2 = React.createElement("p", null, "2");// {type:"p",props:{children:"2"}}
    // const div = React.createElement("div",null,p1,p2);
    const div = React.createElement("div", null, [p1, p2]);
    console.log(div);
    ReactDOM.createRoot(document.querySelector("#root")).render(div);

</script>
</html>